<template>
    <div class="no-login">
        <div class="action">
            <p class="hint">登录后，你的主页、收藏、消息、个人资料会显示在这里</p>
            <f7-button open-login-screen="#registerScreen">注册</f7-button>
            <f7-button open-login-screen="#loginScreen">登录</f7-button>
        </div>
        <div class="other-login">
            <p>
                <span>其他登录方式</span>
            </p>
            <ul class="clearfix">
                <li>
                    <f7-link icon-fa="weixin">微信</f7-link>
                </li>
                <li>
                    <f7-link icon-fa="qq">QQ</f7-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="scss">
    .no-login {
        position: relative;
        height: 100%;

        .action {
            position: absolute;
            left: 0;
            right: 0;
            top: 40%;
            margin: auto;
            width: 80%;
            text-align: center;

            .hint{
                padding: 0 50px;
            }

            .button{
                display: inline-block;
                width: 100px;
                margin: 0 10px;
            }
        }

        .other-login {
            position: absolute;
            bottom: -30px;
            left: 15px;
            right: 15px;
            margin: auto;
            text-align: center;
            border-top: 1px solid #ccc;

            p {
                margin: -10px 0 20px;

                span {
                    padding: 0 5px;
                    background: #efeff4;
                }
            }

            li {
                float: left;
                width: 50%;

                .link {
                     color: #666;
                }

                i.icon {
                    display: block;
                }

                .fa-weixin {
                    color: #1aa932;
                }

                .fa-qq {
                    color: #007aff;
                }
            }
        }
    }
</style>

